//医院详情
<template>
  <div class="">
    <header><nav-bar :title="name" /></header>
    <main>
      <div class="banner-boxa"></div>
      <div class="content-box">
        <div class="titleBox">
          <div class="doc-t between-box">
            <div class="head-portrait">
              <van-image
                round
                width="4.32rem"
                height="4.32rem"
                fit="cover"
                :src="detail.image"
              />
            </div>
            <div class="doc-l">
              <div class="doc-con">
                <span class="doc-name">{{ detail.name }}</span>
                <span class="doc-pos">{{ detail.title }}</span>
              </div>
              <div class="doc-certificate">
                <div class="certificate">资格证书</div>
                <div class="certificate">职业证书</div>
              </div>
            </div>
          </div>
          <div class="title-text text-overflow">
            <span>擅长项目：</span>
            <span class="doc-pro" v-html="detail.content">微整、双眼皮</span>
          </div>
        </div>
        <div class="hospital-d">
          <div class="hospital-t between-box">
            <div class="hospital-t-c" v-if="detail.yy">
              <div class="hospital-name">{{ detail.yy.name }}</div>
              <div class="hospital-type">{{ detail.yy.address }}</div>
            </div>

            <div class="hospital-t-r">
              <van-button plain hairline type="info" @click="getPhone"
                >电话咨询</van-button
              >
            </div>
          </div>
        </div>
        <div class="Product-details">
          <div class="detail-name">推荐商品</div>
          <div class="detail-con">
            <commodity ref="commodity" />
          </div>
        </div>
      </div>
    </main>
  </div>
</template> 

<script>
import navBar from "@/components/navBar";
import commodity from "@/components/commodity";
export default {
  props: {},
  components: {
    navBar,
    commodity,
  },
  data() {
    return {
      name: "医院详情",
      id: "",
      detail: {},
    };
  },
  methods: {
    getDoctorDetails() {
      this.$api
        .getDoctorDetails({
          id: this.id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.detail = res.data;
            console.log(res.data);
          }
        });
    },
    getPhone() {
      window.location.href = "tel://" + "15760185818";
    },
  },

  created() {},

  mounted() {
    this.id = this.$route.query._id;
    this.getDoctorDetails();
    this.$nextTick(() => {
      this.$refs.commodity.getGoodsList();
    });
  },

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
@import "../../style/common.sass";
//只显示几行，剩余省略号
.text-overflow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
//两端对齐
.between-box {
  display: flex;
  justify-content: space-between;
}
//图片大小
.img-size {
  width: 100%;
  height: 100%;
}
.banner-boxa {
  height: 15.19rem;
  background-color: $bgc-a;
  margin-bottom: -1rem;
}
.content-box {
  background-color: $bgc-b;
  border-radius: 0.97rem 0.97rem 0rem 0rem;
  .titleBox {
    background-color: #fff;
    border-radius: 0.97rem 0.97rem 0rem 0rem;
    padding: $layout-size;
    .doc-t {
      padding-top: 0.89rem;
      font-size: 1.19rem;
      .doc-l {
        flex: 1;
        margin-left: 0.5rem;
        .doc-con {
          .doc-name {
            font-size: 0.97rem;
            color: #333333;
          }
          .doc-pos {
            font-size: 0.65rem;
            color: #666666;
            margin-left: $box-m;
          }
        }
        .doc-certificate {
          display: flex;
          .certificate {
            background: #ededed;
            color: #909090;
            font-size: 0.54rem;
            margin-right: 0.5rem;
            margin-top: 0.5rem;
          }
        }
      }
      .head-portrait {
        height: 4.32rem;
        margin-top: -3rem;
      }
    }
    .title-text {
      font-size: 0.97rem;
      font-weight: 600;
      color: #333333;
      line-height: 1.35rem;
      margin-top: 1.22rem;
      font-family: PingFangSC-Semibold, PingFang SC;
      .doc-pro {
        font-size: 0.76rem;
        color: #666666;
        font-weight: 400;
      }
    }
    .title-info {
      color: $info-c;
      font-size: 0.65rem;
      margin-top: 1.1rem;
    }
  }
  .hospital-d {
    height: 4.27rem;
    background-color: #fff;
    margin-top: 0.65rem;
    padding: $layout-size;
    .hospital-t {
      height: 4rem;
      padding-top: 0.7rem;
      .hospital-t-c {
        flex: 1;
        .hospital-name {
          font-size: 0.86rem;
          font-weight: 600;
          color: #333333;
          margin-bottom: 0.3rem;
        }
        .hospital-type {
          font-size: 0.65rem;
          color: #909090;
        }
      }
    }
  }

  .Product-details {
    background-color: #f4f4f4;
    padding: $layout-size;
    margin-top: $box-m;
    .detail-name {
      padding-top: 0.86rem;
      font-size: 0.97rem;
      color: #333333;
      font-weight: 600;
      margin-bottom: $box-m;
    }
  }
}
</style>